<template xmlns="http://www.w3.org/1999/html">
  <div class="content">
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>系统</b></el-breadcrumb-item>
        <el-breadcrumb-item>账号管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main-content">
      <el-form :model="requestContent" :rules="rules" ref="ruleForm" :label-position="labelPosition" label-width="100px">
        <el-form-item label="员工Id" v-show="false" prop="staffId">
          <el-input v-model="requestContent.staffId" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="staffName">
          <el-input :disabled="isDisabled" v-model="requestContent.staffName" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="requestContent.email" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="requestContent.phone" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="请选择部门" prop="selectedDept">
          <el-cascader
            :options="deptOptions"
            @active-item-change="handleDeptChange"
            v-model="requestContent.selectedDept">  
          </el-cascader>
        </el-form-item>
        <el-form-item label="请选择角色" prop="roleArray">
          <el-select v-model="requestContent.roleArray" multiple placeholder="请选择" >
            <el-option
              v-for="item in roles"
              :label="item.label"
              :key="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择银行" v-show="(this.requestContent.roleArray.indexOf(33)>-1)" prop="bankId">
          <el-select v-model="requestContent.bankId" placeholder="请选择" >
            <el-option
              v-for="item in banks"
              :label="item.label"
              :key="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <br/><br/><br/>
        <el-form-item>
          <el-button type="primary" @click="submitInfo('ruleForm')">保存</el-button>
          <el-button type="primary" @click="cancelAdd">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import ElCol from 'element-ui/packages/col/src/col'
  import ElForm from '../../../node_modules/element-ui/packages/form/src/form.vue'
  import ElFormItem from '../../../node_modules/element-ui/packages/form/src/form-item.vue'
  import $ from 'jquery'
  export default {
    components: {
      ElFormItem,
      ElCol,ElForm},
    data () {
      var validateRoleArray=(rule , value , callback)=>{
        if(value===''){
          callback(new error('请输入角色'))
        }else{
          callback()
        }
      };
      return {
        isDisabled:false,
        deptIdList:[],
        labelPosition:'right',
        isShowBank:false,
        deptOptions:[],
        companyNo:sessionStorage.getItem('companyNo'),
        requestContent:{
          staffId:'',
          staffName:'',
          email:'',
          phone:'',
          bankId:'',
          selectedDept:[],
          roleArray:[],
        },
        roles: [],
        banks: [],
        rules:{
          staffName:[
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          phone:[
            {required: true, message: '请输入电话', trigger: 'blur'}
          ]
        },
      }
    },
    methods:{
      test(deptId , options){
        let that = this
        $.each(options,function(index,value){
          if(value.value!=deptId&value.children!=''){
            that.test(deptId,value.children)
          }
          if(value.value==deptId){
            that.$http.get("/dept/list",{
              params:{
                parentDeptId:deptId,
                companyNo:that.companyNo
              }
            })
            .then((response)=>{
              value.children=[]
              $.each(response.data.data,function(index1,value1){
                value.children.push({value:value1.deptId,label:value1.deptName,children:[]})
              })
            })
          }
        })
      },

      getRoleList(){
        let that = this
        this.$http.get("/roles/list")
        .then((response)=>{
          $.each(response.data.data , function(index , value){
            that.roles.push({value:value.roleId,label:value.roleName})
          })
        })
        .catch(function(error){
          console.log(error)
        })
      },

      getBankList(){
        let that = this
        this.$http.get("/dataDict/bank")
        .then((response)=>{
          console.log(response)
          $.each(response.data.data,function(index, value){
            that.banks.push({label:value.name,value:value.dataId})
          })
        })
        .catch(function(error){
          console.log(error)
        })
      },

      handleDeptChange(Dept){
        var i 
        i = Dept.length
        this.requestContent.selectedDept = Dept
        setTimeout(_=>{
          this.test(Dept[i-1],this.deptOptions)
        },300)
      },

      getDeptOptions(id){
            //console.log("id:"+id)
        this.$http.get("/dept/list",{
          params:{
            parentDeptId:id,
            companyNo:this.companyNo
          }
        })
        .then((response)=>{
          let that = this
          $.each(response.data.data , function(index , value){
            if(id===''){
              that.deptOptions.push({value:value.deptId,label:value.deptName,children:[]})
            }
          })
        })
      },

      submitInfo(formName){
        this.$refs[formName].validate((valid)=>{
          if(valid){
            this.addUser()
          }else{
            return false;
          }
        })
      },

      addUser:function () {
        /*var url=()?"saveStaff":"editStaff";*/
        if(this.requestContent.staffId==''){
          this.$http.post("/staff/saveStaff",
            this.requestContent
          ).then((response)=>{
            console.log(response.data);
            if(response.data.success){
              this.$router.push({path:'/backgroundManaSys/accountManage'})
              this.$message("添加成功")
            }else{
              this.$message(response.data.message)
            }
          }).catch(function (response) {
            console.log(response)
          })
        }else{
          this.$http.put("/staff/editStaff",
            this.requestContent
          ).then((response)=>{
            console.log(response.data);
            if(response.data.success){
              this.$router.push({path:'/backgroundManaSys/accountManage'})
              this.$message("修改成功")
            }else{
              this.$message(response.data.message)
            }
          }).catch(function (response) {
            console.log(response)
          })
        }
      },
      cancelAdd:function (formName) {
        this.$router.push({path:'/backgroundManaSys/accountManage'})
        this.$refs[formName].resetFields();
      },

      initDeptOptions(deptOptions,node){
        let that = this
        console.log(node)
        $.each(deptOptions,function(index,dept){
          if(node.parentDeptId!=dept.value){
            that.initDeptOptions(dept.children,node)
          }
          if(node.parentDeptId==dept.value)
          {
            dept.children.push({label:node.name,value:node.id,children:[]})
          }
        })
      },

      //回显部门信息
      deptDetail(deptStructure){
        var temp=[]
        var deptList = []
        let that =this
        // console.log(deptStructure.length)
        $.each(deptStructure,function(index,value){
          deptList.push(value)
        })
        deptList.reverse()
        $.each(deptList,function(index,value){
          that.deptIdList.push(value.deptId)
          if(value.parentDeptId!=null){
            temp.push({id:value.deptId,name:value.deptName,parentDeptId:value.parentDeptId})
          }
        })
         $.each(temp,function(index,value){
          that.initDeptOptions(that.deptOptions,value)
        })
         console.log(this.deptOptions)
      },
      //获取页面详情
      getDetail(){
        let that = this
        this.$http.get('/staff/look/'+this.$route.query.content,
        ).then((response)=>{
          var roleList=[]
          //that.requestContent = response.data.data
          that.requestContent.staffId=response.data.data.staffId
          that.requestContent.staffName=response.data.data.staffName
          that.requestContent.phone=response.data.data.phone
          that.requestContent.email=response.data.data.email
          $.each(response.data.data.roleArray, function(index,value){
            roleList.push(value.roleId)
          })
          if(response.data.data.bankId!=null){
            that.requestContent.bankId = response.data.data.bankId
          }
          that.requestContent.roleArray=roleList
          that.deptDetail(response.data.data.deptStructure)
          that.requestContent.selectedDept=that.deptIdList
        }).catch(function (error) {
          console.log(error)
        })
      }
    },

    mounted() {
      this.getRoleList()
      this.getDeptOptions('')
      this.getBankList()
      if(this.$route.query.content!=null){
        this.isDisabled=true
        this.getDetail()
      }
    }
  }
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
  background: #F7F7F7;
  .title {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0px 10px 0px;
  }
  .main-content {
    background: #fff;
    position: fixed;
    top: 96px;
    bottom: 10px;
    left: 216px;
    right: 16px;
    overflow: auto;
    padding: 20px;
  }
}
</style>